<template>
  <div class="task">
      <div class="error_mes" v-bind:class="isA?'error_mes_open':''">{{errorMes}}</div>
      <div class="bounced_box">
          <h2>登录</h2>
          <span class="iconfont close" v-on:click="closeLogin">&#xe634;</span>
          <form>
              <input type="text" placeholder="请输入邮箱号码" class="email" v-model="email" v-on:focus="closeErr"><br>
              <input type="password" placeholder="请输入密码" v-model="password" v-on:focus="closeErr"><br>
              <button v-on:click.prevent="doLogin" >提交</button>
          </form>
          <div class="registered clearfloat">
              <p class="fl">没有账号?<span v-on:click="switchRegistered">注册</span></p>
              <p class="bule fr">忘记密码</p>
          </div>
          <div class="third">
              <p>第三方账号登录：</p>
              <ul>
                  <li><span class="iconfont">&#xe627;</span></li>
                  <li><span class="iconfont">&#xe68c;</span></li>
                  <li><span class="iconfont">&#xe6a4;</span></li>
              </ul>
          </div>
      </div>
  </div>
</template>
<script>
import axios from "axios"
    export default {
        name:'Login',
        data(){
            return{
                email:'',
                password:'',
                isA:false,
                errorMes:"",
            }
        },
        methods:{
            closeLogin:function(){
                 this.$store.commit('LOGINBOX',false)
            },
            switchRegistered:function(){
                this.$store.commit('LOGINBOX',false)
                this.$store.commit('ISREGISBOX',true)
            },
            doLogin:function(){
                var that = this
                if(this.email===""){
                    this.isA = true
                    this.errorMes="邮箱不能为空"
                }else if(this.password===""){
                    this.isA = true
                    this.errorMes="密码不能为空"
                }else if(!this.email.match(/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/)){
                    this.isA = true
                    this.errorMes="邮箱格式不正确"
                }else{
                    axios.post('/api/login',{
                        email:this.email,
                        password:this.password
                    }).then(function(repsonse){
                        if(repsonse.data.state==="0"){
                            that.isA = true
                            that.errorMes=repsonse.data.message
                        }else if(repsonse.data.state==="-1"){
                            that.isA = true
                            that.errorMes=repsonse.data.message
                        }else{
                            that.isA = true
                            that.errorMes=repsonse.data.message
                            var t= setTimeout(function(){
                                that.$store.commit('LOGINBOX',false);
                                that.$store.commit('USERID',repsonse.data.userId);
                                that.$store.commit('USERNAME',repsonse.data.username);
                                that.$store.commit('HEADERIMG',repsonse.data.headerImg);
                                that.isA = false;
                                that.$store.commit('ISLOGING',true)
                                that.$router.go(0)
                            },1000)
                        }
                    }).catch(function(err){
                        alert(err)
                    })
                }
            },
            closeErr:function(){
                this.isA = false;
            }
        }
    }
</script>
<style scoped lang="scss" src="../../assets/css/login.scss">

</style>
